<template>
  <div class="contain topbar-wrapper" id="contain">
    <!-- 实验室logo -->
    <div class="logo-wrapper">
      <img :src="labLogo" />
      <!-- 标题 -->
      <h2>BIT LAB</h2>
    </div>
    <!-- 完整的导航栏 -->
    <ul class="lead-items">
      <li v-for="(obj, index) in meauData" :key="index" @click="jumpRoute(obj)">
        <span :style="obj.styleColor">{{ obj.text }}</span>
      </li>

      <!-- 白天/夜间模式 -->
      <li @click="modeToggle()">
        <i :class="['iconfont '] + timeIcon"></i><span>{{ timeText }}</span>
      </li>
      <!-- 搜索按钮 -->
      <el-button type="primary" icon="el-icon-search" class="search">搜索</el-button>
    </ul>

    <!-- 导航菜单 -->
    <div class="meau">
      <!-- 菜单按钮 -->
      <el-button class="meau-btn" @click="isShowMeauContent = !isShowMeauContent" :style="menuBtnStyle">菜单<i class="iconfont icon-liebiao"></i></el-button>
      <!-- 设置的过渡动画 -->
      <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__bounceInLeft" leave-active-class="animate__fadeOutDown">
        <!-- 隐藏的菜单内容 -->
        <div class="meau-content" v-show="isShowMeauContent" key="1">
          <ul>
            <li v-for="(obj, index) in meauData" :key="index" @click="jumpRoute(obj)">
              <span :style="obj.styleColor">{{ obj.text }}</span>
            </li>
          </ul>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
// 引入动画css
import 'animate.css'
import axios from 'axios'

export default {
  name: 'TopBar',
  data() {
    return {
      // 实验室logo图片
      // labLogo: require('assets/img/about/logo.png'),
      labLogo: "",
      // 白天/夜间字体图标(默认为白天)
      timeIcon: 'icon-baitianmoshi',
      // 白天/夜间文字
      timeText: '白天',
      // dark表示暗黑模式，light表示明亮模式
      dark: false,
      // 是否展示菜单内容
      isShowMeauContent: false,
      // 菜单按钮的样式
      menuBtnStyle: {},
      // 点击菜单按钮的标识
      meauBtnFlag: false,
      // 菜单数据
      meauData: {
        index: { text: '首页', styleColor: '' },
        aboutUs: { text: '关于我们', styleColor: 'color: orange;' },
        dataDownload: { text: '资料下载', styleColor: '' },
        competitionDetails: { text: '比赛详情', styleColor: '' },
        regLogin: { text: '注册/登录', styleColor: '' }
      }
    }
  },
  methods: {
    // 白天or夜间切换
    modeToggle() {
      // 切换状态
      this.dark = !this.dark
      // 如果是夜间模式
      if (this.dark) {
        // 将切换后的时间记录保存到本地存储
        localStorage.setItem('time', 'dark')
        // 更新html中的属性选择器
        document.documentElement.setAttribute('data-theme', 'dark')
        // 设置字体图标
        this.timeIcon = 'icon-yejian'
        // 设置文字
        this.timeText = '夜间'
      } else {
        // 将切换后的时间记录保存到本地存储
        localStorage.setItem('time', 'light')
        document.documentElement.setAttribute('data-theme', 'light')
        this.timeIcon = 'icon-baitianmoshi'
        this.timeText = '白天'
      }
    },
    // 跳转路由
    jumpRoute(obj) {
      //  点击导航文字，对应的文字颜色改变
      for (let o in this.meauData) {
        // 遍历菜单数据，设置文字颜色为默认样式
        this.meauData[o].styleColor = ''
      }
      // 给当前点击的文字设置颜色
      obj.styleColor = 'color: orange;'

      switch (obj.text) {
        // case "首页":
        //   // 跳转到首页
        //   this.$router.push("/home");
        //   break;
        case '关于我们':
          // 跳转到about页面
          this.$router.push('/about')
          break
        // case "资料下载":
        //   break;
        // case "比赛详情":
        //   break;
        case '注册/登录':
          // 跳转到登录注册页面
          this.$router.push('/register')
          break
      }
    }
  },
  watch: {
    // 导航块是否隐藏
    isShowMeauContent() {
      this.meauBtnFlag = !this.meauBtnFlag
      // 按钮变长,导航块显示
      if (this.meauBtnFlag) {
        this.menuBtnStyle = {
          width: '240px'
        }
        // 按钮变短，导航块隐藏
      } else {
        this.menuBtnStyle = {
          width: '91px'
        }
      }
    }
  },
  mounted() {
    // 如果本地存储中有数据则用，没有则默认是白天
    const time = localStorage.getItem('time') || 'light'
    if (time == 'dark') {
      this.dark = true
      this.timeText = '夜间'
      this.timeIcon = 'icon-yejian'
    }
    // document.documentElement是一个真正的html节点对象，setAttribute是给html标签添加属性
    // 执行下面的代码后：<html data-theme="xxx"></html>
    document.documentElement.setAttribute('data-theme', time)

    axios.get('https://bit-img.oss-cn-guangzhou.aliyuncs.com/long_page.jpg?Expires=1680793703&OSSAccessKeyId=TMP.3KdcM3wog2rFBSBndHEaYkZtwsaNXMPJCKFSfx27VvjNeeLiyc6dXqfWqF2uoQoRZg1Zr991xp7yzV8jTYHfmA3JPf7v8n&Signature=f0EpfyCIWtQHkq6JoZD%2BnqR9Y9s%3D').then(res => { 
      console.log(res);
    })
 }
}
</script>

<style lang="scss" scoped>
@import 'assets/css/_content.scss';
.topbar-wrapper {
  // 开启flex布局
  display: flex;
  // 元素左右分布
  justify-content: space-between;
  width: 100%;
  height: 100px;
  padding: 10px 15px;
  // 设置文本颜色
  @include font_color('mainTextColor');
  transition: all 0.6s;
  // logo及其标题
  .logo-wrapper {
    display: flex;
    // 实验室logo图
    img {
      height: 50px;
      margin-top: 10px;
    }
    h2 {
      font-size: 30px;
      margin: 23px 0 0 7px;
      @include font_color('deputyTextColor');
    }
  }
  // 导航栏
  .lead-items {
    display: flex;
    align-items: center;
    li {
      // 设置移动到li元素时的效果
      &:hover {
        // 设置鼠标的形状为小手
        cursor: pointer;
      }
      display: flex;
      align-items: center;
      padding: 15px 10px;
      // 白天和夜晚图标
      i {
        font-size: 20px;
        margin-right: 3px;
      }
    }
    // 搜索按钮
    .search {
      margin-left: 4px;
      border: none;
      @include background_color('deputyTextColor');
    }
  }
  // 导航菜单
  .meau {
    // 开启相对定位
    position: relative;
    // 隐藏
    display: none;

    // 菜单按钮
    .meau-btn {
      width: 91px;
      margin-top: 20px;
      // 文字靠右
      text-align: right;
      // 取消圆角
      border-radius: 0;
      // 取消边框
      border: none;
      transition: all 0.6s;
      @include background_color('deputyTextColor');
      color: #fff;
      // 菜单图标
      i {
        margin-left: 5px;
      }
    }
    // 隐藏的导航块
    .meau-content {
      // 开启绝对定位
      position: absolute;
      width: 240px;
      // 设置层级
      z-index: 999;
      top: 60px;
      right: 0px;
      padding: 3px 0;
      color: #fff;
      background-color: #605ebc;
      li {
        margin: 0 5px;
        padding: 10px 13px;
        // 设置鼠标的形状为小手
        cursor: pointer;
        // 设置鼠标移动到li时的效果
        &:hover {
          // 设置边框为圆角
          border-radius: 5px;
          // 设置过渡时间为0.5s
          transition: all 0.5s;
          color: #605ebc;
          background-color: #fff;
        }
      }
    }
  }
}

// 屏幕宽度小于 992 像素
@media screen and (max-width: 992px) {
  .topbar-wrapper {
    // 导航块
    .lead-items {
      display: none;
    }
    // 导航菜单
    .meau {
      // 显示导航菜单
      display: block;
    }
  }
}
</style>
